import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const loadSheet = {
  state: () => ({
    loadSheetList: []
  }),
  mutations: {
    addLoadSheetList(state, loadSheetList) {

      if (loadSheetList instanceof Array)
        for (let loadSheet of loadSheetList) {
          state.loadSheetList.push(loadSheet)
        }

      else if (loadSheetList instanceof Object)
        state.loadSheetList.push(loadSheetList)


      else alert("错误的类型")
    },
    setLoadSheet(state, loadSheet) {
      let loadSheetList = state.loadSheetList

      for (let i = 0; i < loadSheetList.length; i++) {
        if (loadSheetList[i].showName == loadSheet.showName) {
          Vue.set(loadSheetList, i, loadSheet)
          break
        }
      }
    },
    changeFieldName(state, data) {
      let loadSheetList = state.loadSheetList
      for (let i = 0; i < loadSheetList.length; i++) {

        if (data.sheetName == loadSheetList[i].showName) {
          let columns = loadSheetList[i].columns

          for (let j = 0; j < columns.length; j++) {
            if (columns[j] == data.oldField) {
              loadSheetList[i].columns[j] = data.newField
              Vue.set(loadSheetList[i].columns, j, data.newField)
            }
          }
        }
      }
    },
    removeField(state, data) {
      let loadSheetList = state.loadSheetList
      for (let i = 0; i < loadSheetList.length; i++) {

        if (data.showName == loadSheetList[i].showName) {
          Vue.set(loadSheetList, i, data)
        }
      }
    }
  },
  actions: {},
  getters: {
    getSheetNameList(state) {
      let loadSheetList = state.loadSheetList
      let sheetNameList = []

      for (let loadSheet of loadSheetList) {
        sheetNameList.push(loadSheet.showName)
      }

      return sheetNameList
    }
  }
}

const canvas = {
  state: () => ({
    canvasList: [
      {
        index: 0,
        active: true,
        chartList: [
        ],
      },
    ],
  }),
  mutations: {
    removeCanvasActive(state) {

      for (let i = 0; i < state.canvasList.length; i++) {
        let canvas = state.canvasList[i]
        canvas.active = false

        Vue.set(state.canvasList, i, canvas)
      }
    },
    addCanvas(state, data) {
      state.canvasList.push(data)
    },
    addChartList(state, data) {
      let index = this.getters.getCanvasActive

      let type = data.type
      let values = data.values
      let columns = data.columns
      let active = data.active
      let moveActive = data.moveActive
      let canvasIndex = index
      let chartIndex = state.canvasList[index].chartList.length
      let zindex = data.zindex
      let axis = data.axis
      let value = data.value
      let title = data.title
      let titleLeft = data.titleLeft
      let titleColor = data.titleColor
      let width = data.width
      let height = data.height
      let theX = data.theX
      let theY = data.theY
      let way = data.way
      let fontsize = data.fontsize
      let clusterCount = data.clusterCount
      let forecast = data.forecast
      let darkMode = data.darkMode

      let xAxisShow = data.xAxisShow
      let xAxisName = data.xAxisName
      let xAxisNameLocation = data.xAxisNameLocation
      let xAxisNameColor = data.xAxisNameColor
      let xAxisOffset = data.xAxisOffset
      let xAxisFontSize = data.xAxisFontSize
      let xAxisPosition = data.xAxisPosition

      let yAxisShow = data.yAxisShow
      let yAxisName = data.yAxisName
      let yAxisNameLocation = data.yAxisNameLocation
      let yAxisNameColor = data.yAxisNameColor
      let yAxisOffset = data.yAxisOffset
      let yAxisFontSize = data.yAxisFontSize
      let yAxisPosition = data.yAxisPosition

      let legendType = data.legendType
      let legendShow = data.legendShow
      let legendLeft = data.legendLeft
      let legendTop = data.legendTop
      let legendWidth = data.legendWidth
      let legendHeight = data.legendHeight
      let legendOrient = data.legendOrient
      let legendColor = data.legendColor
      let legendFontSize = data.legendFontSize
      
      let chart = {
        type, values, columns, active, moveActive, canvasIndex, chartIndex, axis, value,
        title, width, height, theX, theY, way, fontsize, clusterCount, forecast, darkMode,
        titleLeft,titleColor, xAxisShow, xAxisName, xAxisNameLocation, xAxisNameColor,
        xAxisOffset, xAxisFontSize, xAxisPosition,zindex,
        yAxisShow, yAxisName, yAxisNameLocation, 
        yAxisNameColor, yAxisOffset, yAxisFontSize,
        yAxisPosition, legendType, legendShow, legendLeft,
        legendTop, legendWidth, legendHeight, legendOrient,
        legendColor, legendFontSize,
      }
      state.canvasList[index].chartList.push(chart)
    },
    setChartActiveEchart(state, data) {
      let chart = data.chart
      let $echarts = data.$echarts
      let chartActive = this.getters.getChartActive
      chartActive.echarts = $echarts.init(chart)
    },
    setChartActiveFontSize(state, val) {
      let chartActive = this.getters.getChartActive
      chartActive.fontsize = val
    },
    setChartActiveTitle(state, val) {
      let chartActive = this.getters.getChartActive
      chartActive.title = val
    },
    setChartActiveTitleLeft(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.titleLeft = val
    },
    setChartActiveTitleColor(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.titleColor = val
    },
    setChartActiveClusterCount(state, val) {
      let chartActive = this.getters.getChartActive
      chartActive.clusterCount = val
    },
    setChartActiveXAxisShow(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.xAxisShow = val
    },
    setChartActiveXAxisName(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.xAxisName = val
    },
    setChartActiveXAxisLocation(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.xAxisNameLocation = val
    },
    setChartActiveXAxisOffset(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.xAxisOffset = val
    },
    setChartActiveXAxisPosition(state,val){
      let chartActive = this.getters.getChartActive
      chartActive.xAxisPosition = val
    },
    setChartActiveXAxisColor(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.xAxisNameColor = val
    },
    setChartActiveXAxisFontSize(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.xAxisFontSize = val
    },
    setChartActiveYAxisShow(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.yAxisShow = val
    },
    setChartActiveYAxisName(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.yAxisName = val
    },
    setChartActiveYAxisLocation(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.yAxisNameLocation = val
    },
    setChartActiveYAxisOffset(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.yAxisOffset = val
    },
    setChartActiveYAxisPosition(state,val){
      let chartActive = this.getters.getChartActive
      chartActive.yAxisPosition = val
    },
    setChartActiveYAxisColor(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.yAxisNameColor = val
    },
    setChartActiveYAxisFontSize(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.yAxisFontSize = val
    },
    setChartActiveLegendShow(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendShow = val
    },
    setChartActiveLegendType(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendType = val
    },
    setChartActiveLegendLeft(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendLeft = val
    },
    setChartActiveLegendTop(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendTop = val
    },
    setChartActiveLegendWidth(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendWidth = val
    },
    setChartActiveLegendHeight(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendHeight = val
    },
    setChartActiveLegendOrient(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendOrient = val
    },
    setChartActiveLegendColor(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendColor = val
    },
    setChartActiveLegendFontSize(state, val){
      let chartActive = this.getters.getChartActive
      chartActive.legendFontSize = val
    },
    setChartWay(state, way) {
      let chartActive = this.getters.getChartActive
      chartActive.way = way
    },
    echartsResize() {
      let chartActive = this.getters.getChartActive
      chartActive.echarts.resize()
    },

    //设置图表的设置选项
    setEchartOption(state, option) {
      console.log(option)
      let chartActive = this.getters.getChartActive
      if (chartActive) {
        chartActive.echarts.clear()

        chartActive.echarts.setOption(option)


      }
    },

    setCharLoading(state, val) {
      let chartActive = this.getters.getChartActive

      if (val)
        chartActive.echarts.showLoading()

      else
        chartActive.echarts.hideLoading()
    },

    //设置活动画布的状态
    setCanvasActive(state, index) {
      // let index = data.index
      let canvas = null
      this.commit('removeCanvasActive')


      for (let i = 0; i < state.canvasList.length; i++) {

        if (state.canvasList[i].index == index) {
          canvas = state.canvasList[i]
          index = i
          break
        }
      }

      if (!canvas) {
        alert("未找到该canvas索引")
        return
      }

      canvas.active = true

      Vue.set(state.canvasList, index, canvas)
    },

    //通过索引设置图表大小和位置
    setChartSizeOfIndex(state, data) {
      let height = data.height
      let width = data.width
      let theX = data.theX
      let theY = data.theY
      let canvasIndex = data.canvasIndex
      let chartIndex = data.chartIndex

      if (canvasIndex == undefined || chartIndex == undefined) return

      let canvas = state.canvasList[canvasIndex]
      let chart = state.canvasList[canvasIndex].chartList[chartIndex]

      
      if (width) {
        chart.width = width
        setTimeout(()=>{
          chart.echarts.resize()
        },500)
        
      }

      if (height) {
        chart.height = height
      }

      if (theX) {
        chart.theX = theX
      }

      if (theY) {
        chart.theY = theY
      }

      Vue.set(canvas.chartList, chartIndex, chart)
      Vue.set(state.canvasList, canvasIndex, canvas)

      
    },

    //设置活动图表的大小
    setChartSize(state, data) {

      let height = data.height
      let width = data.width
      let theX = data.theX
      let theY = data.theY

      let chart = this.getters.getChartActive
      if (!chart) return

      if (width) {
        chart.width = width
      }

      if (height) {
        chart.height = height
      }

      if (theX) {
        chart.theX = theX
      }

      if (theY) {
        chart.theY = theY
      }
    },

    //设置图表的状态
    setChartActive(state, data) {
      this.commit('removeChartActiveAndMoveActive')

      let activeIndex = data.activeIndex
      let chartIndex = data.chartIndex
      let val = data.val

      let chart = state.canvasList[activeIndex].chartList[chartIndex]

      chart.active = val
      chart.zindex = 100
      Vue.set(state.canvasList[activeIndex].chartList, chartIndex, chart)
    },

    //设置图表的移动状态
    setChartMoveActive(state, data) {
      let activeIndex = data.activeIndex
      let chartIndex = data.chartIndex
      let val = data.val

      let chart = state.canvasList[activeIndex].chartList[chartIndex]

      chart.moveActive = val

      Vue.set(state.canvasList[activeIndex].chartList, chartIndex, chart)
    },

    //设置动态图表的类型
    setChartType(state, data) {
      let canvasIndex = this.getters.getCanvasActive
      let chartIndex = data.chartActiveIndex
      let type = data.type

      let chartList = state.canvasList[canvasIndex].chartList
      let chart = chartList[chartIndex]


      chart.type = type

      Vue.set(chartList, chartIndex, chart)
    },

    //设置活动图表的标题
    setChartTitle(state, way) {
      let chartActive = this.getters.getChartActive

      let axisName = chartActive.axis[0].fieldName
      let valueName = chartActive.value[0].fieldName

      if (way == 'sum') {
        way = '求和'
      }
      else if (way == 'mean')
        way = '平均值'

      else if (way == 'max')
        way = '最大值'
      else if (way == 'min')
        way = '最小值'
      else if (way == 'std')
        way = '标准差'
      else if (way == 'count')
        way = '计数'
      else if (way == 'countNR')
        way = '计数（非重复）'
      else if (way == 'var')
        way = '方差'

      let title = `${valueName} 的${way}(按 ${axisName})`

      if (chartActive.type == 'forecast') {
        let forecastName = chartActive.forecast[0].fieldName
        title = `以${valueName}和${axisName}预测${forecastName}`
      }

      else if (chartActive.type == 'cluster')
        title = `${valueName} 与 ${axisName}的聚类`

      else if (chartActive.type == 'matching')
        title = `${valueName} 与 ${axisName}的拟合`

      chartActive.title = title
    },

    //设置活动图表的字段
    setChartField(state, data) {
      let type = data.type
      let wayType = data.wayType
      let sheetName = data.sheetName
      let fieldName = data.fieldName
      let hasSingle = data.hasSingle

      let canvasIndex = this.getters.getCanvasActive
      let chartIndex = this.getters.getChartActiveIndex
      let chartList = state.canvasList[canvasIndex].chartList

      let obj = {
        sheetName,
        fieldName,
        wayType,
      }


      if (type == 'axis') {
        let chart = chartList[chartIndex]
        chart.axis = [obj]

        if (hasSingle)
          chart.axis = [obj]

        Vue.use(chartList, chartIndex, chart)
      }

      else if (type == 'value') {
        let chart = chartList[chartIndex]
        chart.value.push(obj)

        if (hasSingle)
          chart.value = [obj]

        Vue.use(chartList, chartIndex, chart)
      }

      else if (type == 'forecast') {
        let chart = chartList[chartIndex]
        chart.forecast = [obj]

        Vue.use(chartList, chartIndex, chart)
      }
    },

    //设置图表的值和列
    setChartColumnsAndValues(state, data) {
      let chartActive = this.getters.getChartActive

      chartActive.columns = data.columns
      chartActive.values = []

      for (let i = 0; i < data.values.length; i++) {
        let keys = data.values[i] ? Object.keys(data.values[i]) : []

        chartActive.values.push(data.values[i][keys[0]])
      }
    },
    setChartTheme(state, data) {
      let darkMode = data.darkMode

      let chartActive = this.getters.getChartActive

      chartActive.darkMode = darkMode
    },
    setWayType(state, data) {
      let index = data.index
      let value = data.value

      let chartActive = this.getters.getChartActive

      chartActive.value[index].wayType = value
    },

    // //移除图表
    removeChart(state) {
      let chartActive = this.getters.getChartActive

      let canvasIndex = chartActive.canvasIndex
      let canvas = state.canvasList[canvasIndex]
      // let chartIndex = chartActive.chartIndex
      for (let i = 0; i < state.canvasList[canvasIndex].chartList.length; i++) {
        //删除这个动态图表
        if (state.canvasList[canvasIndex].chartList[i].active) {
          let theEchartsIntance = state.canvasList[canvasIndex].chartList[i].echarts
          let chartList = state.canvasList[canvasIndex].chartList
          for (let j = i + 1; j < chartList.length; j++) {
            let t = chartList[j].echarts
            let option = t.getOption()
            theEchartsIntance.setOption(option)
            chartList[j].echarts = theEchartsIntance
            theEchartsIntance = t
          }
          chartList.splice(i, 1)
          canvas.chartList = chartList
          Vue.set(state.canvasList, canvasIndex, canvas)
          break
          // state.canvasList[canvasIndex].chartList[i].echarts.dispose()
          // console.log(state.canvasList[canvasIndex].chartList[i].echarts.isDispose)
        }


      }
    },
    //删除动态图表的字段
    removeChartField(state, data) {
      let type = data.type
      let index = data.index

      let chartActive = this.getters.getChartActive

      if (type == 'axis') {
        chartActive.axis.splice(index, 1)
      }

      else if (type == 'value') {
        chartActive.value.splice(index, 1)
      }

      else if (type == 'forecast')
        chartActive['forecast'].splice(index, 1)
    },
    //移除动态图表状态与移动动态图表状态
    removeChartActiveAndMoveActive(state) {
      let index = this.getters.getCanvasActive;

      if (index == null) {
        Vue.$message.error("画布页面索引异常");
        return;
      }

      let chartListLength = state.canvasList[index].chartList.length;
      let chartList = state.canvasList[index].chartList;

      for (let i = 0; i < chartListLength; i++) {
        let chart = chartList[i]
        chart.active = false
        chart.moveActive = false
        chart.zindex = 10
        Vue.set(chartList, i, chart)
      }
    },
    setGroup(state, data) {
      let index = data.index
      let chartList = data.chartList
      let group = data.group
      let chart = chartList[index]

      chart.echarts.group = group

      Vue.set(chartList, index, chart)

    },
    removeGroup(state, data) {
      let group = data.group
      let chartList = data.chartList

      for (let i = 0; i < chartList.length; i++) {
        if (chartList[i].echarts.group == group) {
          let chart = chartList[i]
          chart.echarts.group = null

          Vue.set(chartList, i, chart)
        }

      }
    },
    //移除画布
    removeCanvas(state, index) {
      state.canvasList.splice(index, 1);
    }
  },
  getters: {
    //获取动态画布的索引
    getCanvasActive(state) {
      // for (let canvas of state.canvasList) {
      //   if (canvas.active) {
      //     return canvas.index;
      //   }
      // }

      for (let i = 0; i < state.canvasList.length; i++) {
        if (state.canvasList[i].active)
          return i
      }
      return null;
    },
    //获取动态图表的索引
    getChartActiveIndex(state) {
      for (let i = 0; i < state.canvasList.length; i++) {
        if (state.canvasList[i].active) {
          let chartList = state.canvasList[i].chartList

          for (let j = 0; j < chartList.length; j++) {
            if (chartList[j].active) {
              return j
            }
          }
          return -1
        }
      }
      return -1
    },
    //获取活动图表
    getChartActive(state) {
      for (let i = 0; i < state.canvasList.length; i++) {
        if (state.canvasList[i].active) {
          let chartList = state.canvasList[i].chartList

          for (let j = 0; j < chartList.length; j++) {
            if (chartList[j].active) {
              return chartList[j]
            }
          }
          return null
        }
      }
      return null
    }
  },
  actions: {

  }
}

const theme = {
  state: () => ({
    darkMode: false,
    style: {
      dark: {
        canvas: {
          backgroundColor: "#1e1f21"
        },
        head: {
          backgroundColor: "rgb(63, 63, 63)",
          borderBottom: "1px solid black",
          color: "white",
        },
        foot: {
          borderTop: "1px solid black",
          backgroundColor: "rgb(33,33,33)"
        }
      },
      light: {
        canvas: {
          backgroundColor: "rgb(255, 255, 255)"
        },
        head: {
          backgroundColor: "rgb(255, 255, 255)",
          color: "black",
        },
        foot: {
          backgroundColor: "rgb(217, 217, 217)"
        }
      }
    },
    activeStyle: {
      canvas: {
        backgroundColor: "rgb(255, 255, 255)"
      },
      head: {
        backgroundColor: "rgb(255, 255, 255)",
        color: "black",
      },
      foot: {
        backgroundColor: "rgb(217, 217, 217)"
      }
    }
  }),
  mutations: {
    setDarkMode(state, val) {
      state.darkMode = val

      if (val.darkMode) {
        state.activeStyle.canvas = state.style.dark.canvas
        state.activeStyle.head = state.style.dark.head
        state.activeStyle.foot = state.style.dark.foot
      }

      else {
        state.activeStyle.canvas = state.style.light.canvas
        state.activeStyle.head = state.style.light.head
        state.activeStyle.foot = state.style.light.foot
      }
    },
  }
}

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    loadSheet,
    canvas,
    theme,
  }
})
